<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/23
 * Time: 16:31
 */
-->
<template>
  <div class="comment-container" :class="{ 'comment-container-reply': reply }">
    <div class="comment-item" v-if="data">
      <div class="left">
        <el-avatar v-if="userObjectData[data.userId].img" :src="userObjectData[data.userId].img"
                   :size="reply ? 38 : 48"></el-avatar>
        <el-avatar v-else icon="el-icon-user-solid" :size="reply ? 38 : 48"></el-avatar>
      </div>

      <div class="right">
        <div class="user-bar">
          <h5>{{ userObjectData[data.userId].tuserName }}</h5>
        </div>

        <div class="content">
          <span>{{ data.comment }}</span>
        </div>

        <div class="footer">
          <div class="footer-left">
            <span class="time">{{ data.time }}</span>
          </div>
          <div class="footer-right">
            <div v-if="data.userId == $store.state.userData.userId
             || $store.state.userData.role == '1'
             || $store.state.userData.role == '2'"
                 class="reply"
                 @click="deleteThing">
              <i class="el-icon-delete"/>
              <span class="reply-text">删除</span>
            </div>

            <div v-if="data.userId != $store.state.userData.userId"
                 class="reply"
                 @click="toggleEditor">
              <i class="el-icon-chat-dot-square"/>
              <span class="reply-text">{{ getReplyText }}</span>
            </div>
          </div>
        </div>

        <comment-editor v-show="replying" @click="postReply"></comment-editor>

        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import CommentEditor from "./CommentEditor";

export default {
  name: "CommentContainer",
  components: {CommentEditor},
  props: {
    // 回复模式
    reply: {
      type: Boolean,
      default: false
    },

    // 留言ID
    commentId: Number,
    // 如果这是回复，他是第几个
    replyIndex: Number,

    // 数据
    data: {
      type: Object
    },

    // 用户数据
    userObjectData: {
      type: Object
    }
  },
  data() {
    return {
      // 正在回复
      replying: false
    }
  },
  computed: {
    getReplyText() {
      return this.replying ? '取消回复' : '回复';
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    /**
     * 切换
     */
    toggleEditor() {
      this.replying = !this.replying;
    },

    /**
     * 执行操作后告诉父视图 刷新
     */
    updateList() {
      this.toggleEditor();
      this.$emit('change');
    },


    /**
     * 获取单个留言
     */
    getCommentData(id) {
      return new Promise(resolve => {
        this.axios.get(this.$store.state.api + '/comment/getById?commentid=' + id)
            .then((response) => {
              if (response.data.code == 200 && response.data.data != null) {
                let comment = response.data.data;
                comment.comment = JSON.parse(comment.comment);
                resolve(comment);
              }
            })
            .catch((error) => {
              console.log(error);
            });
      })
    },

    /**
     * 回复
     *
     * @param value
     */
    postReply(value) {
      // 获得数据
      this.getCommentData(this.commentId).then(response => {
        const reply = {
          userId: this.$store.state.userData.userId,
          comment: value,
          time: new Date().format('yyyy-MM-dd hh:mm:ss')
        };

        response.comment.reply.push(reply);
        response.comment = JSON.stringify(response.comment);
        this.updateComment(response);
      });
    },

    /**
     * 删除
     */
    deleteThing() {
      this.$confirm('删除该留言, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        // 回复
        if (this.reply) {
          // 获得数据
          this.getCommentData(this.commentId).then(response => {
            response.comment.reply.splice(this.replyIndex, 1);
            response.comment = JSON.stringify(response.comment);
            this.updateComment(response);
          });

          // 告诉父视图刷新
          this.updateList();
        }

        // 留言
        else {
          this.axios.delete(this.$store.state.api + '/comment/del?ids=' + this.commentId)
              .then((response) => {
                if (response.data.code == 200) {
                  this.$message({
                    type: response.data.data ? 'success' : 'error',
                    message: response.data.data ? '删除成功！' : '删除失败！'
                  });
                }

                // 告诉父视图刷新
                this.updateList();
              })
              .catch((error) => {
                console.log(error);
              });
        }

      });
    },

    /**
     * 请求更新
     *
     * @param comment
     */
    updateComment(comment) {
      this.axios.put(this.$store.state.api + '/comment/update', [comment]).then((response) => {
        // 告诉父视图刷新
        this.updateList();
        this.$message({
          type: response.data.data ? 'success' : 'error',
          message: response.data.data ? '回复成功！' : '回复失败！',
          duration: 2000
        });
      }).catch((error) => {
        console.log(error);
      });
    }
  },
  watch: {}
}
</script>

<style lang="less">
.comment-container {
  margin-top: 28px;

  .comment-item {
    display: flex;
    justify-content: center;

    .left {
      padding-right: 20px;
      display: flex;
      justify-content: flex-start;
    }

    .right {
      flex-grow: 1;

      .user-bar {
        margin-bottom: 8px;

        h5 {
          font-size: 14px;
          color: #222;
          cursor: default;
        }
      }

      .content {
        span {
          text-align: justify;
          color: #222;
          word-break: break-all;
          word-wrap: break-word;
          letter-spacing: .5px;
        }
      }

      .footer {
        display: flex;
        margin-top: 8px;
        justify-content: space-between;
        align-items: center;

        .footer-left {
          justify-content: flex-start;
          display: flex;
          cursor: default;
        }

        .footer-right {
          justify-content: flex-end;
          display: flex;
          cursor: pointer;

          .reply {
            margin-left: 16px;

            i {
              width: 20px;
              height: 20px;
            }
          }
        }
      }

    }
  }
}

.comment-container-reply {
  margin-top: 18px;

  .comment-item {
    .left {
      padding-right: 20px;
    }

    .right {
      flex-grow: 1;

      .user-bar {
        margin-bottom: 8px;

        h5 {
          font-size: 14px;
          color: #222;
          cursor: default;
        }
      }

      .content {
        span {
          text-align: justify;
          color: #222;
          word-break: break-all;
          word-wrap: break-word;
          letter-spacing: .5px;
        }
      }

      .footer {
        display: flex;
        margin-top: 8px;
        justify-content: space-between;
        align-items: center;

        .footer-left {
          justify-content: flex-start;
          display: flex;
          cursor: default;
        }

        .footer-right {
          justify-content: flex-end;
          display: flex;
          cursor: pointer;

          .reply {
            i {
              width: 20px;
              height: 20px;
            }
          }
        }
      }

    }
  }
}
</style>